
// createRouter: 用来创建router路由实例对象
// createWebHashHistory: 创建hash模式的路由配置

// 1. / 和 /login 路由切换到时候 整个页面都进行变化 - 同为一级路由
// 2. / 基础上尝试切换分类路由  已经渲染出来的组件基础上局部内容的变化 - 分类它是/路由下的二级路由
// 如何寻找嵌套路由:观察内容切换到部分 如果是整个页面都变了 那就是一级 如果整个页面没变
// 而是局部变了 那就嵌套的二级 每一级路由都需要一个单独的路由出口 router-view

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout'
import Login from '@/views/Login'
import Category from '@/views/Category'
import Home from '@/views/Home'
import Good from '@/views/Good'
import CartList from '@/views/CartList'
// 配置路由对应关系 {path,component}
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '', // 当二级路由的path为空时 它将作为默认的二级直接渲染到二级路由的出口处
        component: Home
      },
      {
        path: 'category/:id',
        component: Category
      },
      {
        path: 'good/:id',
        component: Good
      },
      {
        path: 'cartlist',
        component: CartList
      }
    ]
  },
  {
    path: '/login',
    component: Login
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
